<!-- <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head> -->
	<!DOCTYPE html>
	<html lang="en" class="no-ie" style="overflow:hidden;">
		<head>
			<meta charset="UTF-8">
			<title>全球top5国家历年国际文献发表数</title>
			<script>
				"object" != typeof ue || "object" != typeof ue.interface ? ("object" != typeof ue && (ue = {}), ue.interface = {},
					ue.interface.broadcast = function(e, t) {
						if ("string" == typeof e) {
							var o = [e, ""];
							void 0 !== t && (o[1] = t);
							var n = encodeURIComponent(JSON.stringify(o));
							"object" == typeof history && "function" == typeof history.pushState ? (history.pushState({}, "",
								"#" + n), history.pushState({}, "", "#" + encodeURIComponent("[]"))) : (document.location
								.hash = n, document.location.hash = encodeURIComponent("[]"))
						}
					}) : function(e) {
					ue.interface = {}, ue.interface.broadcast = function(t, o) {
						"string" == typeof t && (void 0 !== o ? e.broadcast(t, JSON.stringify(o)) : e.broadcast(t, ""))
					}
				}(ue.interface), (ue4 = ue.interface.broadcast);
			</script>
			<script src="./dist/echarts.min.js"></script>
			<script src="./static/js/jquery.min.js"></script>
			<script src="./static/js/FuncTest.js"></script>
			<script src="./static/js/PortChart.js"></script>
			<script>
				$(function() {
					ue4("getSize", {
						mes: "get windows size"
					});
					ue4("getColor", {
						mes: "get all color"
					});
					ue4("getData", {
						mes: "get all data"
					});
					ue4("beginSize", {
						mes: BeginSize[0],
						mes2: BeginSize[1]
					});
					ue4("beginSizeY", {
						mes: BeginSize
					});
				});
				/*$(function () {
				    
				});*/
			</script>
			<style>
				* {
					margin: 0;
					padding: 0;
				}
				@font-face {
					font-family: 'SourceHanSansCN';
					/* src: url(./static/font/SourceHanSansCN-Regular.otf); */
					src: url(./static/font/DIN-Medium.otf);
				}
			</style>
		</head>
		<body>
			<div id="main"></div>
			<!--
		dataTemp1: y轴数值;dataTemp2: x轴标题
		-->
			<script>
				let BeginSize = [418.48, 267.06];
				let myChart = null;
				let colorList=["#E1A938",'#823BFF','#04CDF4','#0088FF','#009258']

				let itemTitle=['2018','2019','2020']
				let itemData1=[80,98,120]
				let itemData2=[70,70,60]
				let itemData3=[50,75,105]
				let itemData4=[90,100,75]
				let itemData5=[60,95,105]
				// let dataList1 = []
				function fresh() {
					if (myChart==null) {
					    myChart = echarts.init(document.getElementById('main'));  //利用原型调取Echarts的初始化方法
					}
					let option = {
						//backgroundColor: 'rgba(3, 16, 38, 1)',
						title:{
							// text:'全球top5国家历年国际文献发表数',
							// textStyle:{
							// 	fontSize: 20,
							// 	fontFamily: 'SourceHanSansCN',
							// 	color:'#00D8FF',
							// 	lineHeight: 34,
							// 	fontWeight: 500
							// },
							// left: 'center',
							// top:'0%'
							text:'单位：篇',
							top: '2%',
							left:'3%',
							textStyle: {
								fontSize: 15,
								color: "#99c8ff",
								fontFamily: 'SourceHanSansCN'
							}
						},
						tooltip: {
							trigger: 'axis',
							backgroundColor: "rgba(3, 16, 38, 0.9)",
							axisPointer: {
								type: 'none',
							},
							padding: 3,
							formatter: function(params){
								// console.log(params)
								var str = `
									<span style='color: #FFFFFF;font-weight: bold;'>${params[0].name}年</span>
									<br />
									<span style='margin-right: 13px'>中国</span> <span style='color: ${params[0].color};margin-right: 10px;line-height: 20px;font-weight: 800;'>${params[0] ? params[0].data : ''} 篇</span>
									<span style=margin-right:13px>日本</span> <span style='color: ${params[1].color};line-height: 20px;font-weight: 800;'>${params[1]? params[1].data : ''} 篇</span>
									<br />
									<span style=margin-right:13px>美国</span> <span style='color: ${params[2].color};margin-right: 10px;line-height: 20px;font-weight: 800;'>${params[2] ? params[2].data : ''} 篇</span>
									<span style=margin-right:13px>德国</span> <span style='color: ${params[3].color};line-height: 20px;font-weight: 800;'>${params[3]? params[3].data : ''} 篇</span>
									<br />
									<span style=margin-right:13px>韩国</span> <span style='color: ${params[4].color};line-height: 20px;font-weight: 800;'>${params[4]? params[4].data : ''} 篇</span>`
								return str
								
							},
							textStyle: {
								color: "#E0EDF9",
								fontFamily: 'SourceHanSansCN',
								lineHeight: 24,
								fontWeight: 500,
								fontSize: 14
							},
						},
						grid: {
							left: '4%',
							// width:'91%',
							height:'68%',
							bottom: '18%',
							containLabel: true
						},
						legend: {
							orient: 'horizontal',
							itemWidth: 9,
							itemHeight: 9,
							itemGap: 21,
							icon: 'circle',
							// align: "auto",
							bottom: 15,
							// top:'2',
							textStyle: {
								color: '#DFF8FF',
								fontSize: 15,
								lineHeight: 19,
								fontFamily: 'SourceHanSansCN',
								fontWeight: 400
							},
							data:['中国','日本','美国','德国','韩国']
						},
						xAxis: [{
							type: 'category',
							show: false,
							axisLabel: {
								show:true,
								color: '#DFF8FF',
								fontSize: 17,
								margin: 11, // 标签与轴线之间的距离
								interval: 0 //解决x轴显示不全
							},
							splitLine: {
								show: false
							},
							axisLine: {
								show: true,
								lineStyle:{
									type:'solid',
									color:'#B1B1B1',
									width:1
								}
							},
							axisTick :{
								show: false
							},
							show:true,
							data:itemTitle
						}],
						yAxis: [{
							splitLine: {
								show: true,
								lineStyle:{
									type:'dotted',
									color:'#556468',
									width:1
								}
							},
							axisLine: { //y轴
								show: true,
								lineStyle:{
									type:'solid',
									color:'#B1B1B1',
									width:1
								}
							},
							axisTick: {
								show: false
							},
							axisLabel: {
								color: 'rgba(255, 255, 255, 0.6)',
								fontSize: 15,
							},
							interval: 50,
							max: 150,
							nameGap: 12,
							type: 'value',
						}],
						series: [
						{
							name: '中国',
							type: "bar",
							barWidth: 10,
							barGap: "40%",
							data: itemData1,
							itemStyle: {
								barBorderRadius: [10,10,4,4],
								color: 'rgba(225, 169, 56, 1)'
							}
						},
						{
							name: '日本',
							type: "bar",
							barWidth: 10,
							barGap: "40%",
							data: itemData2,
							itemStyle: {
								barBorderRadius: [10,10,4,4],
								color: 'rgba(130, 59, 255, 1)'
							}
						},
						{
							name: '美国',
							type: "bar",
							barWidth: 10,
							barGap: "40%",
							data: itemData3,
							itemStyle: {
								barBorderRadius: [10,10,4,4],
								color: 'rgba(4, 205, 244, 1)'
							}
						},
						{
							name: '德国',
							type: "bar",
							barWidth: 10,
							barGap: "40%",
							data: itemData4,
							itemStyle: {
								barBorderRadius: [10,10,4,4],
								color: 'rgba(0, 136, 255, 1)'
							}
						},
						{
							name: '韩国',
							type: "bar",
							barWidth: 10,
							barGap: "40%",
							data: itemData5,
							itemStyle: {
								barBorderRadius: [10,10,4,4],
								color: 'rgba(0, 146, 88, 1)'
							}
						},
						]
					};
					myChart.setOption(option);
				}
				fresh();


				//浏览器测试用
				change(BeginSize[0], BeginSize[1]);

				function change(x, y) {
					let div = document.getElementById("main");
					//alert("I am an alert box!!");
					div.style.width = x + "px";
					div.style.height = y + "px";
					var myOption = myChart.getOption();
					myChart.resize();
					let types = []
					myOption.series.forEach((item) => {
						types.push(item.type)
					})
					return types
				}


				/************下面数据***********/
				ue.interface.TransList = function(data) {
					var obj = JSON.parse(data);
					itemTitle = obj.data1;
					itemData1 = obj.data2;
					itemData2 = obj.data3;
					itemData3 = obj.data4;
					itemData4 = obj.data5;
					itemData5 = obj.data6;
					fresh();
				};
				ue.interface.TransList111 = function(data) {
					itemData1 = data;
					fresh();
				};
				ue.interface.TransList1 = function(data) {
					itemTitle = data;
					fresh();
				};

			</script>
		</body>
	</html>

	<!-- <body>
	</body>
</html> -->
